<!-- 文章列表 - 卡片视图 -->
<section id="article-container" class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    <?php foreach ($content['items'] as $article): ?>
    <!-- 文章卡片 1 -->
    <article class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
        <div class="relative">
            <img src="<?php echo $article['image']; ?>" alt="<?php echo $article['title']; ?>" class="w-full h-48 object-cover">
            <span class="absolute top-3 left-3 badge bg-<?php echo $article['category']['color']; ?> text-white"><?php echo $article['category']['name']; ?></span>
        </div>
        <div class="p-5">
            <h3 class="font-bold text-lg mb-2 line-clamp-2">
                <a href="<?php echo $article['url']; ?>" class="hover:text-primary transition-colors"><?php echo $article['title']; ?></a>
            </h3>
            <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                <?php echo $article['summary']; ?>
            </p>
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <img src="<?php echo $article['author']['avatar']; ?>" alt="<?php echo $article['author']['name']; ?>" class="w-8 h-8 rounded-full object-cover">
                    <span class="ml-2 text-sm text-gray-600"><?php echo $article['author']['name']; ?></span>
                </div>
                <div class="flex items-center text-sm text-gray-500">
                    <span class="flex items-center mr-3">
                        <i class="fa fa-eye mr-1"></i> <?php echo $article['views']; ?>
                    </span>
                    <span class="flex items-center">
                        <i class="fa fa-calendar-o mr-1"></i> <?php echo $article['publishTime']; ?>
                    </span>
                </div>
            </div>
        </div>
    </article>
    <?php endforeach; ?>
</section>
<!-- 分页 -->
 <div class="flex justify-end">
    <nav class="inline-flex items-center">
        <a href="#" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-100">
            <?php echo $content['pagination']['prev']; ?>
        </a>
        <?php foreach ($content['pagination']['pages'] as $page): ?>
        <?php if($page == $content['pagination']['current']): ?>
        <a href="#" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-100">
            <?php echo $page; ?>
        </a>
        <?php else: ?>
        <a href="<?php echo $content['pagination']['url'] . $page; ?>" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-100">
            <?php echo $page; ?>
        </a>
        <?php endif; ?>
        <?php endforeach; ?>
        <a href="#" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-100">
            <?php echo $content['pagination']['next']; ?>
        </a>
    </nav>
</div>